 {% extends "baseD.html" %}

{% block headtitle %}- Build
	{% if scene.name %}
		({{scene.name}})
	{% else %}
		Scene
	{% endif %}
{% endblock %}

{% block css %}
    <link href="/live3dstatic/css/build.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="/live3dstatic/css/buildTut.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block scripts %}
	<script type="text/javascript" src="/live3dstatic/scripts/site.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/helperFunctions.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/earth.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/canvas.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/canvasPoint.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/canvasPolygon.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/earthPoint.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/earthPolygon.js"></script>
    
    <script type="text/javascript" src="/live3dstatic/scripts/build2D.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/zoomBox.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/build3D.js"></script>

    <script type="text/javascript" src="/live3dstatic/scripts/buildTut.js"></script>
    
    {% if calibration %}
        <script type="text/javascript" src="/live3dstatic/scripts/calibration.js"></script>
        <script type="text/javascript" src="/live3dstatic/scripts/matrix.js"></script>
    {% endif %}
    
    <script type="text/javascript">
    	// keep the build windows on screen without need for a scroll
    	// when the browser window gets resized
    	window.onresize = buildWindowResize;

    	// close active dropdown menus when the user clicks away
    	document.onclick = function() {
    		if ( !menuActive && menuOpen != 'none' ) {
    			closeActiveMenu();
    			prevMenuOpen = 'none';
    		}
    	}

    	// some math to keep build windows resized correctly
		function buildWindowResize() {
			resizeImageContainer();
			resizeEarthContainer();
		}
		function resizeEarthContainer() {
			var desiredHeight = window.innerHeight - 210;
			document.getElementById('map3d').style.height = (desiredHeight) + "px";
		}
		function resizeImageContainer() {
			var desiredHeight = window.innerHeight - 210;
			var imgContainer = document.getElementById('imagecontainer');

			var imgWidth = document.getElementById('sizeU').value;
			var imgHeight = document.getElementById('sizeV').value;
			
			if ( imgHeight < desiredHeight ) {
				imgContainer.style.overflowY = 'hidden';
			} else {
				imgContainer.style.overflowY = 'scroll';
			}
			if ( imgWidth < ( window.innerWidth * 0.42 ) ) {
				imgContainer.style.overflowX = 'hidden';
			} else {
				imgContainer.style.overflowX = 'scroll';
			}

			document.getElementById('imagecontainer').style.height = (desiredHeight) + "px";
		}
		
		// navigation menus
		// functions allow dropdown menus to open and close on click
		// active and open menu vars ensure menus don't close once opened and
		// clicked inside of
		var menuActive = false;
		var menuOpen = 'none', prevMenuOpen = 'none', buttonOpen = 'none';
		function openMenu( menuID, buttonID ) {
			if ( menuID == prevMenuOpen ) {
				prevMenuOpen = 'none';
			} else {
				document.getElementById(menuID).style.display = "block";
				toggleActiveButton(buttonID);
				menuOpen = menuID;
				buttonOpen = buttonID;

				if ( menuID == 'sceneSettingsDropdown' ) { 	
					var shim = document.getElementById('iframeShimSceneSettings');
					var menu = document.getElementById(menuID);

					shim.style.display = 'block';
					shim.style.width = menu.offsetWidth + 'px';
					shim.style.height = menu.offsetHeight + 'px';
				}
			}
		}
		function closeActiveMenu() {
			if ( menuOpen != 'none' ) {
				document.getElementById(menuOpen).style.display = "none";
				toggleActiveButton(buttonOpen);

				if ( menuOpen == 'sceneSettingsDropdown' ) {
					document.getElementById('iframeShimSceneSettings').style.display = 'none';
				}
				
				prevMenuOpen = menuOpen;
				menuOpen = 'none';
			}
		}
		function closeAllMenus() {
			toggleActiveMenu(false);
			closeActiveMenu();
			prevMenuOpen = 'none';
		}
		function toggleActiveMenu( bool ) {
			menuActive = bool;
		}
		function toggleActiveButton( buttonID ) {
			var buttonObj = document.getElementById(buttonID);

			if ( buttonObj.style.backgroundPosition == '50% -31px' || buttonObj.style.backgroundPosition == 'center -31px' ) {
				buttonObj.style.borderColor = '#CCCCCC';
				buttonObj.style.backgroundPosition = 'center 0px';
				buttonObj.style.color = "#b5b5b5";
			} else {
				buttonObj.style.borderColor = '#777777';
				buttonObj.style.backgroundPosition = 'center -31px';
				buttonObj.style.color = "#777777";
			}
		}

		// keep the number of correspondences button up-to-date with
		// whether or not the current scene is calibrated and also
		// how many correspondences are done for the current scene
		function toggleNumCorrsButton( numPoints ) {
			if ( {{numPts}} + numPoints < {{requiredNumCorrs}} ) {
				document.getElementById('numCorrsButton').innerHTML = "<span style='color:#777777'>" + ({{numPts}} + numPoints) + "</span> points aligned / <span style='color:#777777'>{{requiredNumCorrs}}</span> needed";
				document.getElementById('numCorrsButton').style.backgroundImage = "none";
				document.getElementById('numCorrsButton').title = "You have " + ({{numPts}} + numPoints) + " aligned points. You need {{requiredNumCorrs}} for calibration.";
			} else {
				document.getElementById('numCorrsButton').innerHTML = "<span style='margin-left:35px;'>Calibrated!</span>";
				document.getElementById('numCorrsButton').style.backgroundImage = "url('/live3dstatic/images/check.png')";
				document.getElementById('numCorrsButton').style.backgroundPosition = "-5px 0px"
				document.getElementById('numCorrsButton').title = "This scene is calibrated (" + ({{numPts}} + numPoints) + " total points)!";
			}
		}

		// opens and closes lightboxes by their IDs (lightboxes being boxes of
		// content appearing on top of a background that obscures the current page)
		function openLightBox( elementID ) {
			var element = document.getElementById(elementID);
			element.style.display = 'block';

			// Positioning calculations (must be centered horiz, vert)
			if ( elementID != 'helpLightBox' ) {
				element.style.top = ((window.innerHeight / 2) - (element.offsetHeight)) + 'px';
				element.style.left = ((window.innerWidth / 2) - (element.offsetWidth / 2)) + 'px';
			} 

			document.getElementById('lightBoxOverlay').style.display = 'block';
			document.getElementById('map3d').style.visibility = 'hidden';
			document.body.style.overflow = 'hidden';
		}
		function closeLightBox( elementID ) {
			document.getElementById(elementID).style.display = 'none';
			document.getElementById('lightBoxOverlay').style.display = 'none';
			document.getElementById('map3d').style.visibility = 'visible';
			document.body.style.overflow = 'scroll';
		}

		// alternates the location textbox from a grey'd out "unused" version
		// to a darker "used" version when the user clicks inside and starts typing
		function toggleSearchOverlay() {
			var overlay = document.getElementById('locationSearchOverlay');

			if ( overlay.value == "Enter a location..." ) {
				overlay.value = "";
				overlay.style.color = "#333333";
			} else if ( overlay.value == "" ) {
				overlay.style.color = "#999999";
				overlay.value = "Enter a location...";
			}
		}

		// when the user hits "enter" when typing in a location,
		// initiate the search for that location in Google Earth
		function locationSearchKeypress( e ) {
			var key = e.keyCode || e.which;
			if ( e.keyCode == 13 ) {
				searchLocationFromOverlay();
			}
		}

		// makes sure all points are moved in both the image and google earth before it
		// will allow the user to proceed with adding new points
		function ensureAllPointsMoved() {
			if ( !build2D.movedPoints() || !build3D.movedPoints() ) {
				document.getElementById('allPointsMovedContent').style.display = "none";
				document.getElementById('notAllPointsMovedContent').style.display = "block";

				if ( !build2D.movedPoints() && !build3D.movedPoints() ) {
					document.getElementById('movedPointsIdentifier').innerHTML = "the <strong>image</strong> AND <strong>google earth</strong>";
				} else if ( !build2D.movedPoints() ) {
					document.getElementById('movedPointsIdentifier').innerHTML = "the <strong>image</strong>";
				} else {
					document.getElementById('movedPointsIdentifier').innerHTML = "<strong>google earth</strong>";
				}
			} else {
				document.getElementById('allPointsMovedContent').style.display = "block";
				document.getElementById('notAllPointsMovedContent').style.display = "none";

				if ( !build3D.allPointsHitBuilding() ) {
					document.getElementById('hitTestWarningText').style.display = "block";
				} else {
					document.getElementById('hitTestWarningText').style.display = "none";
				}
			}
		}

		// initiate the process of adding more points to the interface
		function addMorePoints() {
			closeActiveMenu();
			prevMenuOpen = 'none';

			build2D.saveAndAdd();
			build3D.saveAndAdd();

			var numPoints = 0;
			for ( var i = 0; i < build2D.polygonSet.length; i++ ) {
				numPoints += build2D.polygonSet[i].vertices;
			}

			toggleNumCorrsButton(numPoints);

			if ( {{numPts}} + numPoints >= {{requiredNumCorrs}} && {{numPts}} < {{requiredNumCorrs}} ) {
				openLightBox('saveLightBox');
			} 

			document.getElementById('polyName').value = "";
		}

		// discard current point set changes
		function discardChanges() {
			toggleNumCorrsButton(0);
			closeLightBox('saveLightBox');

			build2D.discardChanges();
			build3D.discardChanges();
		}

		// dumbs all 2d and 3d data to HTML and submits the form,
		// passing all user-made correspondences to the server
		function saveAndViewScene(saveBtnClicked) {
			var numPoints = 0;
			for ( var i = 0; i < build2D.polygonSet.length; i++ ) {
				numPoints += build2D.polygonSet[i].vertices;
			}
			for ( var i = 0; i < build2D.polygon.points.length; i++) {
				if ( build2D.polygon.points[i].movedPoint && build3D.polygon.points[i].movedPoint ) {
					numPoints++;
				} 
			}

			if ( {{numPts}} + numPoints >= {{requiredNumCorrs}} ) {
				var confirmSubmit = true;

				// if the save button was clicked, check for points moved now
				// otherwise this check has already been made since the user came here
				// through add more points
				if ( saveBtnClicked ) {
					if ( (!build2D.movedPoints() || !build3D.movedPoints()) ) {
						if ( build2D.movedAPoint() || build3D.movedAPoint() ) {
							confirmSubmit = confirm('You need to move all points in the image and Google Earth to save changes!\n\nPress \'OK\' to discard changes and view your scene or press \'CANCEL\' to stay on this page and keep making changes.');
						}
					} else {
						if ( !build3D.allPointsHitBuilding() ) {
							confirmSubmit = confirm('It looks like one or more of your Google Earth points are touching the ground!\n\nPress \'OK\' to save changes anyway or press \'CANCEL\' to stay on this page and keep making changes.');
						}
					}
				}

				if ( confirmSubmit ) {
					closeLightBox('saveLightBox');
					buildLoading.display( 'Loading...' , 'We\'re saving your scene changes! This could take a few seconds.' )

					build2D.dumpToHTML();
					build3D.dumpToHTML();
					document.finalform.submit();
				}
			} else {
				document.getElementById('numPointsSpan').innerHTML = numPoints;
				openLightBox('cantSaveLightBox');
			}
		}
		
		// set the value of is_private
		function setPriv() {
			if(document.getElementById('private').checked){
				document.getElementById("is_private").value = "True";
			} else{
				document.getElementById("is_private").value = "False";
			}
		}
		
		// center 3d pins on screen
		function centerPins() {
			if (! build3D.movedAPoint()){
				build3D.polygon.buildInCenter();
			}
		}

		// set up search fields and initiate search for location (google earth)
		function searchLocationFromOverlay() {
			document.getElementById('searchedLocation').value = "True";
			document.getElementById('address').value = document.getElementById('locationSearchOverlay').value;

			submitLocation();
		}

		// not sure why this is here
		function validateForm() {
			build2D.dumpToHTML();
            build3D.dumpToHTML();

            return true;
		}

		// Function called from build2D and build3D on point move
		function _buildMovedPoint() {
			var numPoints = 0;
			for ( var i = 0; i < build2D.polygonSet.length; i++ ) numPoints += build2D.polygonSet[i].vertices;
			for ( var i = 0; i < build2D.polygon.vertices; i++ )
				if ( build2D.polygon.points[i].movedPoint && build3D.polygon.points[i].movedPoint ) numPoints++;

			toggleNumCorrsButton(numPoints);
		}

		var build2D;
        var build3D;
        var buildTut;
        var buildLoading;

        // set up the scene (camera location, pitch, roll, etc) if it's already calibrated
        {% if calibration %}
            var calib;
            function initCalibration(){
                var M = new Matrix(4,3, [[{{calibration.m11}}, {{calibration.m12}}, {{calibration.m13}}, {{calibration.m14}}], 
                                        [{{calibration.m21}}, {{calibration.m22}}, {{calibration.m23}}, {{calibration.m24}}],
                                        [{{calibration.m31}}, {{calibration.m32}}, {{calibration.m33}}, {{calibration.m34}}]]
                                );
                var camCenter = {x: {{calibration.cameraX}}, y: {{calibration.cameraY}}, z: {{calibration.cameraZ}},
                                        lat: {{scene.cameraLatitude}}, lon: {{scene.cameraLongitude}}, alt: {{scene.cameraAltitude}}};
                var pitch = {{scene.cameraTilt}};
                var heading = {{scene.cameraHeading}};
                var origin = {lat: {{calibration.originLatitude}}, lon: {{calibration.originLongitude}}, alt: {{calibration.originAltitude}} };
                var width = {{scene.width}};
                var height = {{scene.height}};
                calib = new Calibration(M, camCenter, pitch, heading, origin, width, height)
        	}
        {% endif %}

        // set up the 2d side (left) by adding previous correspondences (if any)
        // and creating an object to handle the 2d functions
        function init2D() {
            {% if scene %}
                build2D = new Build2D('{{scene.url}}', {{scene.index}});
            {% else %}
                build2D = new Build2D('{{url}}', -1);
            {% endif %}
            
            // add all the correspondences.
            {% for corr in correspondences %}
                build2D.addPreviousPoint({{corr.index}}, {{corr.u}}, {{corr.v}})
            {% endfor %}
            
            // add all the meshes.
            var mapping = null;
            {% for mesh in meshes %}
                mapping = new Array({%for m in mesh.correspondenceMapping%}{{m}}{%if not forloop.last%},{%endif%} {%endfor%});
                triangles = new Array({%for t in mesh.triangles%}{{t}}{%if not forloop.last%},{%endif%} {%endfor%});
                build2D.addPreviousTriangle(mapping, triangles)
            {% endfor %}

            buildTut = new BuildTut();
            buildLoading = new LoadingOverlay();
        }
        
        // set up the 3d side (right) by creating an object to handle the 3d functionality
        function init3D() {
            build3D = new Build3D();
            //center the pins all the time
            google.earth.addEventListener(ge.getView(), 'viewchangeend', centerPins);
            
            // add all the correspondences.
            {% for corr in correspondences %}
                build3D.addPreviousPoint({{corr.index}}, {{corr.latitude}}, {{corr.longitude}}, {{corr.altitude}})
            {% endfor %}
            
            // add all the meshes.
            var mapping = null;
            {% for mesh in meshes %}
                mapping = new Array({%for m in mesh.correspondenceMapping%}{{m}}{%if not forloop.last%},{%endif%} {%endfor%});
                triangles = new Array({%for t in mesh.triangles%}{{t}}{%if not forloop.last%},{%endif%} {%endfor%});
                build3D.addPreviousTriangle(mapping, triangles)
            {% endfor %}
            
            {% if scene %}
                jumpTo({{scene.cameraLatitude}}, {{scene.cameraLongitude}} );
                
                {% if scene.calibrated %}
                    initJumpToFull({{scene.cameraLatitude}}, {{scene.cameraLongitude}}, {{scene.cameraAltitude}}, {{scene.cameraRoll}}, {{scene.cameraTilt}}, {{scene.cameraHeading}});
                {% else %}
                    jumpTo( {{scene.cameraLatitude}}, {{scene.cameraLongitude}} );          
                {% endif %}
            {% endif %}

            {% if userTest %}
            	// lat lon alt roll tilt heading
            	initJumpToFull(32.2302, -110.955, 780, 0, 65, 20)
            {% endif %}

            {% if buildAt %}
            	initJumpToFull( parseFloat({{lat}}), parseFloat({{lon}}), parseInt({{alt}}), parseInt({{roll}}), parseInt({{tilt}}), parseInt({{head}}) )
            {% endif %}

            {% if calibration %}
                initCalibration();
            {% endif %}
        }
    </script>
{% endblock %}

{% block onload %}  
	googleInit();
	loadImage('{{ url }}', init2D, null);
	buildWindowResize();
{% endblock %}

{% block content %}
	<div id="lightBoxOverlay"></div>
	<div id="tut_overlay"></div>
	<div id="tut_textContainer" class="noselect">
		<div onclick="buildTut.endBuildTut();" class="closeButton"></div>
		<div id="tut_leftArrow" class="tut_arrow" onclick="buildTut.prevStep();"></div>
		<div id="tut_textContent"></div>
		<div id="tut_rightArrow" class="tut_arrow" onclick="buildTut.nextStep();"></div>
		<div id="tut_numNav"></div>
	</div>

	<div id="saveLightBox">
		<div class="lightBoxContent">
			<span class="h3">Your scene is now calibrated!</span>
			<form name="finalform" id="finalform" action="insert/" method="post" onsubmit="return validateForm();">
				<input type="hidden" id="imageUs" name="imageUs" value="-1"/>
				<input type="hidden" id="imageVs" name="imageVs" value="-1"/>
				<input type="hidden" id="latitudes" name="latitudes" value="-1"/>
				<input type="hidden" id="longitudes" name="longitudes" value="-1"/>
				<input type="hidden" id="altitudes" name="altitudes" value="-1"/>
				<input type="hidden" id="triangleIndices" name="triangleIndices" value="-1"/>
				<input type="hidden" id="polyNames" name="polyNames" value="-1"/>
				
				{% if isvfyw %}
					<input type="hidden" id="isvfyw" name="isvfyw" value="{{ isvfyw }}"/>
				{% else %}
					<input type="hidden" id="isvfyw" name="isvfyw" value="False"/>
				{% endif %}
				<input type="hidden" id="url"  name="url" value="{{ url }}"/>
				<input type="hidden" id="createSc" name="createSc" value="{{ createScn }}"/>			
				{% if amosId %}
					<input type="hidden" id="amosId" name="amosId" value="{{ amosId }}"/>
				{% endif %}
				
				{% if scene %}
					<input type="hidden" id="amosId" name="sceneId" value="{{ scene.index }}"/>
				{% else %}
					<input type="hidden" id="amosId" name="sceneId" value=""/>
				{% endif %}
				<input type="hidden" id="sizeU" name="sizeU" value="-1" />
				<input type="hidden" id="sizeV" name="sizeV" value="-1" />
				<input type="hidden" id="goToAfterSave" name="goToAfterSave" value='1' />

				<input type="hidden" id="cameraAlt" name="cameraAlt" value="-1" />
				<input type="hidden" id="cameraLat" name="cameraLat" value="-1" />
				<input type="hidden" id="cameraLon" name="cameraLon" value="-1" />
				<input type="hidden" id="cameraRoll" name="cameraRoll" value="-1" />
				<input type="hidden" id="cameraTilt" name="cameraTilt" value="-1" />
				<input type="hidden" id="cameraHeading" name="cameraHeading" value="-1" />
								
				<br /><span class="h3">Save your scene:</span><br /><br />
				<div id="save" style="margin-left: 20px">
					{% if not scene.name %}
						<label for="sceneName">Scene Name (e.g., 'London'):</label>
						{% if userTest %}
							<input type="text" id="sceneName" name="sceneName" value="userTest" style="padding:3px;" disabled />
						{% else %}
							<input type="text" id="sceneName" name="sceneName" style="padding:3px;"/>
						{% endif %}
						<br />
						{% if username %}
							<span style="margin-left:20px;">Scenes are accessible after creation using the "my scenes" link in the upper right.</span>
							<br /><br />
							<label for="private">Make Private: </label>

							{% if isvfyw %}
								<input type="checkbox" onchange="setPriv();" id="private" name="private" checked="checked"/>
								<input type="hidden" id="is_private" name="is_private" value="True" />
							{% else %}
								<input type="checkbox" onchange="setPriv();" id="private" name="private"/>
								<input type="hidden" id="is_private" name="is_private" value="False" />
							{% endif %}
							<br />
							<span style="margin-left:20px;">Private scenes will only be viewable to you. You can change this later.</span>
							<br />
						{% else %}
							<input type="hidden" id="is_private" name="is_private" value="False" />
						{% endif %}
					{% endif %}
				</div>
				<br />
				
				<input type="button" value="Save & View Scene" onclick="saveAndViewScene(false);"/>
				<input type="button" value="Keep working on this scene" onclick="closeLightBox(this.parentNode.parentNode.id);"/>
				<input type="button" value="Discard My Changes" onclick="discardChanges();"/>
				
				<span id="warning"></span>				
					<!-- ReCAPTCHA code -->
					<!-- Hopefully I'll never have to uncomment these lines...
					<script type="text/javascript"
						src="http://api.recaptcha.net/challenge?k=6Lf_rgoAAAAAAFGMVimHawqIOWdkivQ3YFm8H-YF">
					</script>
					<noscript>
							<iframe src="http://api.recaptcha.net/noscript?k=6Lf_rgoAAAAAAFGMVimHawqIOWdkivQ3YFm8H-YF"
									  height="300" width="500" frameborder="0"></iframe><br>
							<textarea name="recaptcha_challenge_field" rows="3" cols="40">
							</textarea>
						<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
					</noscript>-->
			</form><!-- End finalform -->
		</div>
	</div>
	<div id="cantSaveLightBox">
		<div onclick="closeLightBox(this.parentNode.id);" class="closeButton"></div>
		<div class="lightBoxContent">
			You only have <strong><span id="numPointsSpan"></span></strong> aligned points! You need <strong>{{requiredNumCorrs}}</strong> points before you can save. Add more by using the 'plus' icon!
		</div>
	</div>
	<div class="clear"></div>
	<div id="leftside">
		<!--<div id="imageButtonWrapper">-->
		<div id="imageSettingsButton" title="Image Settings" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)" onclick="closeActiveMenu();openMenu('imageSettingsDropdown',this.id);"></div> 
		<div id="imageSettingsDropdown" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)">
			<h3>Number of points in current set:</h3>
			<form name="corrForm" style="margin:5px 0px 0px 20px;">
				<input style="margin-left:5px;" type="radio" onchange="build2D.buildPoly();  build3D.polygon.buildInCenter();" name="correspondence" id="corr1" value="1" /> 
				<label for="corr1"> One</label>
						
				<input style="margin-left:5px;" type="radio" onchange="build2D.buildPoly();  build3D.polygon.buildInCenter();" name="correspondence" id="corr3" value="3" />
				<label for="corr3"> Three</label>
								
				<input style="margin-left:5px;" type="radio" onchange="build2D.buildPoly();  build3D.polygon.buildInCenter();" name="correspondence" id="corr4" value="4" checked/>
				<label for="corr4"style="margin-right:5px;"> Four</label>
			</form>
			<br />
            <label for="showzoombox"><span class="h3">Show zoom view:</span> </label>
            <input  style="margin-left:5px;" type="checkbox" onchange="build2D.toggleZoomView()" id="showzoombox" checked />
            <br />
            <br />
            <label for="zoomfactorbox"><span class="h3">Zoom scale factor</span> </label>
            <br />
            <input style="margin:5px 0 0 25px;padding:2px 2px 2px 5px;" type="text" value="2" size="1" onfocus="javascript:this.select()" onchange="build2D.zoomBox.changeZoomScaleFactor()" id="zoomfactorbox" /><input type="button" style="margin-left:5px;" value="change" onclick="build2D.zoomBox.changeZoomScaleFactor()" />
            <br />
			{% if scene %}
				<br />
				<label for="firstImageToggle"><span class="h3">Use original image:</span> </label>
                <input type="checkbox" id="firstImageToggle" onchange="build2D.toggleFirstImage()">
                <br />
            {% endif %}
            {% if correspondences %}
            	<br />
                <label for="snapbox"><span class="h3">Snap points:</span> </label>
                <input  style="margin-left:5px;" type="checkbox" onchange="build2D.updateSnap();" id="snapbox" />
            {% endif %}	
		</div>

		<div id="numCorrsButton"   
			{% if numPts|greaterEqual:requiredNumCorrs %}
				title="This scene is calibrated ({{numPts}} total points)!"><span style='margin-left:35px;'>Calibrated!</span>
			{% else %}
				title="You have {{numPts}} labeled points. You need {{requiredNumCorrs}} for calibration." style="background-image:none;"><span style='color:#777777'>{{numPts}}</span> points aligned / <span style='color:#777777'>{{requiredNumCorrs}}</span> needed
			{% endif %}
		</div>

		<div id="addPointsButton" title="Add new set of points" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)" onclick="ensureAllPointsMoved();closeActiveMenu();openMenu('addPointsDropdown',this.id);"></div>
		<div id="addPointsDropdown" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)">
			<div style="font-size:14px;" id="notAllPointsMovedContent" style="display:none; margin-bottom:10px;">
				You must align all points in your current set for <span id="movedPointsIdentifier"></span> before adding another set!
			</div>
			<div id="allPointsMovedContent">
				<span class="h3">Add more points to your scene:</span>
				<div id="hitTestWarningText" style="margin: 10px 0px 15px 20px; display:none;">
					<strong>*Note*</strong> It appears at least one of your points in Google Earth is touching the ground. If this wasn't intentional, take a closer look and fix any errors before adding more points!
				</div><!-- end hitTestWarningText -->
				<div id="namebox" style="margin-left: 20px;">
					<label for="polyName">(optional) Name the shape you just outlined (e.g.,'rooftop'):</label><br />
					<input type="text" id="polyName" name="polyName" style="padding:3px;margin:3px 3px 3px 20px;"/>
					<br /><br />
				</div><!-- end namebox -->

				<input type="button" onclick="addMorePoints()" value="I'm done aligning these points, add more" /><br /><br />
				<input type="button" id='saveAndQuitButton' style="display:none;" onclick="saveAndViewScene(false)" value="I'm done aligning all points, save and view my scene" />
			</div>
		</div>

		<div id="saveButton" title="Save and view your scene!" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)" onclick="closeActiveMenu();saveAndViewScene(true);"></div>
		<div onclick="buildTut.startBuildTut();" id="helpButton" title="Help"></div>
		<canvas id='zoomCanvas' width='150' height='150' onmouseover="build2D.zoomBox.undraw()">
			Your browser does not support the canvas element, and cannot use this application.
		</canvas>
		<div id="imagecontainer" onscroll="build2D.updateCenter();">
			<img id="loadingImage" src="/live3dstatic/images/loading.gif" />
			<canvas id='canvasObject' width='300' height='300' onmousemove='build2D.mousemove(event)' onmouseup  ='build2D.mouseup(event)' onmousedown='build2D.mousedown(event)'>
				Your browser does not support the canvas element, and cannot use this application.
			</canvas>
		</div><!-- end imagecontainer -->
		<!--</div>-->
	</div>
	
	<div id="rightside">
		<iframe id="iframeShimZoom" border="0" scrolling="no"></iframe>
		<input onfocus="toggleSearchOverlay()" onblur="toggleSearchOverlay()" onkeypress="locationSearchKeypress(event)" type="text" id="locationSearchOverlay" value="Enter a location..." />
		<iframe id="iframeShimSceneSettings" border="0" scrolling="no"></iframe>
		<div id="sceneSettingsButton" title="Scene Settings" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)"  onclick="closeActiveMenu();openMenu('sceneSettingsDropdown',this.id);"></div>
		<div id="sceneSettingsDropdown" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)">
			<form name='searchform' id='searchform'>
				<h3>View options</h3>
				<div style="margin:5px 0 0 20px;">
					<input type="hidden" id="searchedLocation" value="False">
					<input type="hidden" id="address">
					{% if not scene %}
						<input type="hidden" id="needLocation" value="True">
					{% else %}
						<input type="hidden" id="needLocation" value="False">
					{% endif %}
					<input type="button" onclick="javascript:build3D.polygon.buildInCenter();" value="Reset Current Point Set" />
					{% if scene %}
						{% if scene.calibrated %}
							<input type='button' style="margin-right:10px;" value="Reset View" 
						    onclick="jumpToFull({{scene.cameraLatitude}}, {{scene.cameraLongitude}}, {{scene.cameraAltitude}},{{scene.cameraRoll}}, {{scene.cameraTilt}}, {{scene.cameraHeading}});" />
						{% else %}
							<input type='button' style="margin-right:10px;" onclick="jumpTo( {{scene.cameraLatitude}}, {{scene.cameraLongitude}} );" value ="Reset View" />
						{% endif %}

						<input type='button' style="margin-left:10px;" onclick="parent.location='viewScene?scene={{scene.index}}'" value ="View Scene" />
					{% endif %}
				</div>
			</form> <!-- End searchForm -->
			<br />
			<form name="visualize">
				<span class="h3">Show structures</span><br />	
				<div style="margin:5px 0 0 20px;">				
					<input type="checkbox" onchange="toggleBuildings();" id="showBuildings" checked style="margin:3px;"/>
					<label for="showBuildings">  Buildings </label>
					<input type="checkbox" onchange="toggleGrayBuildings();" id="showGrayBuildings" checked style="margin:3px; margin-left:10px; "/>
					<label for="showGrayBuildings">  Gray buildings </label>
				</div>
				<br />
				<span class="h3">Change altitude by (meters):</span>
				<div style="margin:5px 0 0 20px;">	
	                <input type="text" id="spee" class="inp1" value="100" size="5" style="margin:3px;"onfocus="this.select();" />
	                <input type="button" onclick="javascript:changeSpeed();javascript:changeAlt('decrease')" style="cursor:pointer;margin:3px;" value=" up " />
	                <input type="button"  onclick="javascript:changeSpeed();javascript:changeAlt('increase')" value=" down " style="cursor:pointer;" />
	            </div>
			</form><!-- End visualize form -->
			{% if scene.calibrated %}<!-- scene.calibrated -->
				<br />
				<h3>Camera frustum</h3>
				<div style="margin:5px 0 0 20px;" id="viewFrust">
                    <label for="">View frustum: </label>
                    <input type="checkbox" id="frustumBox" onfocus="this.select();" onchange="calib.toggleFrustum()"/>
                    <label for="edgeLength" style="margin-left:10px;">Length (meters): </label>
                    <input type="text" id="edgeLength" value="50" size="2" onchange="calib.updateFrustum()">
       			</div><!-- end viewFrust -->
       		{% endif %}
       		{% if calibration %} <!-- calibration -->
            	<br />
            	<label for="depthbox"><span class="h3">3D Assistance:</span> </label>
                <input style="margin-left:5px;" type="checkbox" onchange="build2D.updateDepthAssist()" id="depthbox" />
            {% endif %}
		</div>
		<div id="hitTestHelperBox" class="noselect">
			<span id="buildingHitText">building</span> | <span id="groundHitText">ground</span>
		</div>
		<div id="gecontainer">
			<div id="map3d"></div>
		</div><!-- end gEarth -->
	</div>
	
	<div class="clear"></div>
{% endblock %}
                
{% block scripts2 %} {% endblock %}